@import '../../style/index.scss';

$input: 'uni-input';

.#{$input} {
  display: inline-block;
  position: relative;

  .#{$input}-container {
    display: flex;
    align-items: center;

    .#{$input}-prefix {
      margin-right: 5px;
      color: rgba(0, 0, 0, 0.65);
    }

    .#{$input}-input {
      display: table;

      &.#{$input}-group {
        .#{$input}-addon-before {
          border-bottom-right-radius: 0;
          border-top-right-radius: 0;
          border-right: 0;
        }

        .#{$input}-input-content {
          position: relative;

          &:first-child {
            input {
              border-bottom-right-radius: 0;
              border-top-right-radius: 0;
            }
          }

          &:not(:first-child):not(:last-child) {
            input {
              border-radius: 0;
            }
          }

          &:last-child {
            input {
              border-bottom-left-radius: 0;
              border-top-left-radius: 0;
            }
          }
        }

        .#{$input}-addon-after {
          border-bottom-left-radius: 0;
          border-top-left-radius: 0;
          border-left: 0;
        }
      }

      .#{$input}-addon-before {
        display: table-cell;
        text-align: center;
        background-color: #fafafa;
        vertical-align: middle;
        border: 1px solid #d9d9d9;
        border-right: 0;
        border-radius: $border-radius-normal;
        cursor: pointer;
        color: rgba(0, 0, 0, 0.65);

        .before {
          display: block;
          margin-left: 11px;
          margin-right: 11px;
          position: relative;
          line-height: 30px;
        }
      }

      .#{$input}-addon-after {
        display: table-cell;
        text-align: center;
        background-color: #fafafa;
        vertical-align: middle;
        border: 1px solid #d9d9d9;
        border-left: 0;
        border-radius: $border-radius-normal;
        cursor: pointer;
        color: rgba(0, 0, 0, 0.65);

        .after {
          display: block;
          margin-left: 11px;
          margin-right: 11px;
          position: relative;
          line-height: 30px;
        }
      }

      .#{$input}-input-content {
        position: relative;

        input {
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          margin: 0;
          list-style: none;
          position: relative;
          padding: 4px 20px 4px 11px;
          width: 100%;
          height: 32px;
          font-size: $font-size-normal;
          line-height: $line-height-normal;
          color: rgba(0, 0, 0, 0.65);
          background-color: #fff;
          background-image: none;
          border: 1px solid #d9d9d9;
          border-radius: $border-radius-normal;
          -webkit-transition: all 0.3s;
          transition: all 0.3s;
          display: table-cell;

          &::placeholder {
            color: #999;
          }

          &:focus {
            outline: 0;
            border-color: $color-brand-normal;
            box-shadow: 0 0 0 2px #ffccc7;
          }

          &:hover {
            border-color: $color-brand-normal;
          }

          &::-webkit-inner-spin-button {
            -webkit-appearance: none !important;
          }
        }

        .uni-icon {
          position: absolute;
          right: 5px;
          top: 50%;
          transform: translateY(-50%);
        }
      }
    }

    .#{$input}-suffix {
      margin-left: 5px;
      color: rgba(0, 0, 0, 0.65);
    }
  }
}
